<span page-title ng-model="hostCollection">{{ 'Host Collection: ' | translate }} {{ hostCollection.name }}</span>

<div data-extend-template="layouts/details-page-with-breadcrumbs.html">
  <div data-block="header">
    <h2>{{ hostCollection.name }}</h2>
  </div>

  <div data-block="item-actions">
    <span select-action-dropdown>
      <ul class="dropdown-menu dropdown-menu-right" uib-dropdown-menu role="menu">
        <li role="menuitem" ng-hide="denied('create_host_collections')">
          <a ui-sref="host-collection.copy" translate>
            Copy Host Collection
          </a>
        </li>

        <li class="divider"></li>

        <li role="menuitem" ng-hide="denied('destroy_host_collections', hostCollection)">
          <a ng-click="openModal()" translate>
            Remove
          </a>
        </li>
      </ul>

      <div bst-modal="removeHostCollection(hostCollection)" model="hostCollection">
        <div data-block="modal-header" translate>Remove Host Collection "{{ hostCollection.name }}"?</div>
        <div data-block="modal-body" translate>Are you sure you want to remove Host Collection "{{ hostCollection.name }}"?</div>
      </div>
    </span>
  </div>

  <nav data-block="navigation" ng-hide="isState('host-collection.copy')">
    <ul class="nav nav-tabs details-nav">
      <li ng-class="{active: isState('host-collection.info')}">
        <a ui-sref="host-collection.info">
          <span translate>
            Details
          </span>
        </a>
      </li>

      <li ng-class="{active: stateIncludes('host-collection.hosts')}">
        <a ui-sref="host-collection.hosts.list">
          <span translate>
            Hosts
          </span>
        </a>
      </li>
    </ul>
  </nav>

  <div data-block="content">
    <div ui-view></div>
  </div>
</div>
